<template>
    <view :style="themeColor">
        <view class="pure-top"></view>
        <view class="main">
            <view class="css-billtext">{{ getState() }}</view>
            <view class="css-wcircle"></view>
            <view class="css-jbbj" />
            <bill-info :data="data"></bill-info>
        </view>
        <view class="h200" />
        <view class="bottom-bar" v-if="data.InvoiceState != 1">
            <text class="btn btn-gray" @click="cancle">撤销申请</text>
            <text class="btn btn-success ml" v-if="data.InvoiceState == 0" @click="submit">修改信息</text>
            <text class="btn btn-success ml" v-if="data.InvoiceState == 2" @click="submit">重新申请</text>
        </view>
        <uni-popup ref="pick" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确定撤销申请?"
                :before-close="true"
                @close="close"
                @confirm="doCancle"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import billInfo from "@/pages_me/components/billing/bill-info.vue"
import { SaveOrderInvoice, GetOrderInvoice, CancleOrderInvoice } from "@/service/api/order.js"

import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"

export default {
    components: {
        billInfo,
    },
    data() {
        return {
            id: "",
            billText: "已开票",
            data: {},
        }
    },
    onLoad(e) {
        if (e.id) {
            this.id = parseInt(e.id)
            this.getdetaildata()
        }
    },
    created() {},
    mounted() {},
    methods: {
        getdetaildata() {
            let param = {
                id: this.id,
            }
            GetOrderInvoice(param).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        getState() {
            if (this.data.InvoiceState === 0) {
                return "开票中"
            } else if (this.data.InvoiceState === 1) {
                return "已开票"
            } else {
                return "已驳回"
            }
        },
        cancle() {
            this.$refs.pick.open()
        },
        //取消
        close() {
            this.$refs.pick.close()
        },
        //确认撤销申请
        doCancle() {
            this.close()
            let param = {
                id: this.id,
            }
            CancleOrderInvoice(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("删除成功")
                    setTimeout(() => {
                        this.easyReLaunch("/pages_me/packet/billing/index")
                    }, 500)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //修改信息/提交申请
        submit() {
            this.easyReLaunch(`/pages_me/packet/billing/creatBilling?id=${this.id}`)
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: $app-page-padding;
}
.pure-top {
    width: 100%;
    height: 300rpx;
    position: relative;
    z-index: 0;
    overflow: hidden;
    margin-top: -2rpx;

    &:after {
        content: "";
        width: 160%;
        height: 300rpx;
        position: absolute;
        left: -30%; //椭圆左边隐藏10%，右边隐藏10%
        top: 0;
        border-radius: 0 0 50% 50%; //左上角，右上角，右下角，左下角
        background: $app-color-main;
    }
}
.main {
    margin-top: -300rpx;
    position: relative;
    z-index: 1;
    margin-left: 32rpx;
    margin-right: 32rpx;
}
.css-billtext {
    color: white;
    font-size: 40rpx;
    font-weight: Medium;
    margin-top: 40rpx;
    margin-left: 40rpx;
}
.css-jbbj {
    background-image: linear-gradient(#eeeeee, #ffffff);
    height: 40rpx;
    margin: -57rpx 18rpx 0 18rpx;
}
.css-wcircle {
    margin-top: 24rpx;
    height: 44rpx;
    border: 12rpx solid #ffffff;
    border-radius: 22rpx;
}

.bottom-bar {
    .btn {
        width: 70%;
        border-radius: 100rpx;
        height: 88rpx;
        font-size: 32rpx;
    }
}
</style>
